<template>
	<div>
		<div class="header">
			<!-- <div class="headsculpture"> -->
			<image class="headsculpture" src="../../static/logo.png" mode=""></image>
			<!-- <u-avatar class="headsculpture" size="20rpx" :src="src"></u-avatar> -->
			<!-- </div> -->
			<div class="context">
				<div class="name">不感冒的小鹏</div>
				<div class="pmrcid">PMRC号：019203467</div>
				<div class="ip">IP归属：北京</div>
			</div>
			<image class="qrcode" src="../../static/HomePage/ewm.jpg" mode="" @tap="gonavigate()"></image>
		</div>
		<div class="center">
			<u-tabs class="utabs" :list="utabslist" :is-scroll="false" :current="current" @change="change"></u-tabs>
			<div class="ActivityList" v-for="(item,index) in ActivityListdate" :key="index">
				<div class="Activity">
					<div class="left">
						<div class="title">{{item.name}}</div>
						<div class="Activitydate"><u-icon name="clock"></u-icon>
							<div class="text">{{item.starttime}}</div>
						</div>
						<div class="Activityaddress"><u-icon name="map"></u-icon>
							<div class="text">{{item.address}}</div>
						</div>
					</div>
					<div class="right">
						<div class="Activitytype">{{item.starttype}}</div>
						<image class="Activitypicture" src="../../static/HomePage/PMRC.PNG" mode=""></image>
					</div>
				</div>
			</div>

		</div>
		<u-tabbar v-model="current" :list="list" :mid-button="true"></u-tabbar>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				utabslist: [{
					name: '未开始',
					count: 6
				}, {
					name: '活动中',
					count: 5
				}, {
					name: '历史活动'

				}],
				current: 0,
				ActivityList: [{
					name: '蓝色港湾跑步活动',
					starttime: '2023-09-13-18:00',
					address: '朝阳区蓝色港湾BlueGlass广场店',
					starttype: '未开始'
				}, {
					name: '蓝色港湾跑步活动',
					starttime: '2023-09-13-18:00',
					address: '朝阳区蓝色港湾BlueGlass广场店',
					starttype: '已开始'
				}, {
					name: '蓝色港湾跑步活动',
					starttime: '2023-09-13-18:00',
					address: '朝阳区蓝色港湾BlueGlass广场店',
					starttype: '活动中'
				}, {
					name: '蓝色港湾跑步活动',
					starttime: '2023-09-13-18:00',
					address: '朝阳区蓝色港湾BlueGlass广场店',
					starttype: '已开始'
				}, {
					name: '蓝色港湾跑步活动',
					starttime: '2023-09-13-18:00',
					address: '朝阳区蓝色港湾BlueGlass广场店',
					starttype: '未开始'
				}],
				ActivityListdate: [],
				list: [{
						iconPath: "home",
						selectedIconPath: "home-fill",
						text: '首页',
						count: 2,
						isDot: true,
						customIcon: false,
					},
					{
						iconPath: "photo",
						selectedIconPath: "photo-fill",
						text: '放映厅',
						customIcon: false,
					},
					{
						iconPath: "https://cdn.uviewui.com/uview/common/min_button.png",
						selectedIconPath: "https://cdn.uviewui.com/uview/common/min_button_select.png",
						text: '发布',
						midButton: true,
						customIcon: false,
					},
					{
						iconPath: "play-right",
						selectedIconPath: "play-right-fill",
						text: '直播',
						customIcon: false,
					},
					{
						iconPath: "account",
						selectedIconPath: "account-fill",
						text: '我的',
						count: 23,
						isDot: false,
						customIcon: false,
					},
				],
				current: 0
			}
		},
		mounted() {
			this.ActivityListdate = this.ActivityList.filter(x => x.starttype == this.utabslist[0].name)

		},
		methods: {
			change(index) {
				this.current = index;
				this.ActivityListdate = this.ActivityList.filter(x => x.starttype == this.utabslist[index].name)
			},
			gonavigate() {
				uni.navigateTo({
					//保留当前页面，跳转到应用内的某个页面
					url: '/pages/My/QRcode'
				})
			}
		}
	}
</script>

<style lang="scss">
	.header {
		width: 750rpx;
		height: 140rpx;
		display: flex;
		// justify-content: center;
		align-items: center;
		margin: 80rpx 10rpx 0rpx 60rpx;

		.headsculpture {
			width: 200rpx;
			height: 200rpx;
			border-radius: 360rpx;
		}

		.context {
			margin: 30rpx 0rpx 20rpx 30rpx;

			.name {
				font-size: 19px;
				font-weight: 500;
				letter-spacing: 0px;
				line-height: 21.95px;
				color: rgba(0, 0, 0, 1);
				text-align: left;

			}

			.pmrcid {
				font-size: 12px;
				font-weight: 500;
				letter-spacing: 0px;
				line-height: 16.46px;
				color: rgba(102, 98, 98, 1);
				text-align: left;
			}

			.ip {
				font-size: 12px;
				font-weight: 500;
				letter-spacing: 0px;
				line-height: 16.46px;
				color: rgba(102, 98, 98, 1);
				text-align: left;
			}
		}

		.qrcode {

			margin: 20rpx 0rpx 20rpx 40rpx;
			width: 120rpx;
			height: 120rpx;
		}
	}

	.center {
		width: 750rpx;
		margin-top: 80rpx;

		.utabs {
			border-bottom: rgba(102, 98, 98, 1);
		}

		.ActivityList {
			width: 668rpx;
			margin: 0 auto;
			margin-top: 30rpx;

			.Activity {
				width: 668rpx;
				height: 256rpx;
				opacity: 1;
				border-radius: 40rpx;
				background: rgba(196, 196, 196, 1);
				display: flex;

				.left {
					width: 380rpx;
					margin-left: 40rpx;

					.title {
						padding-top: 30rpx;
						width: 346rpx;
						height: 50rpx;
						font-size: 32rpx;
						font-weight: 400;
						letter-spacing: 1.89px;
						line-height: 48rpx;
						color: rgba(0, 0, 0, 1);
						text-align: left;
						vertical-align: top;
					}

					.Activitydate {
						padding-top: 100rpx;
						display: flex;

						.text {
							margin-left: 16rpx;
							overflow: hidden;
							white-space: nowrap; //内容超出不换行
							text-overflow: ellipsis;
						}
					}

					.Activityaddress {
						padding-top: 10rpx;
						display: flex;

						.text {
							margin-left: 16rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}
				}

				.right {
					.Activitytype {
						width: 130rpx;
						height: 60rpx;
						float: right;
						border-radius: 0rpx 30rpx 0rpx 0rpx;
						text-align: center;
						line-height: 60rpx;
						background-color: greenyellow;
					}

					.Activitypicture {
						float: right;
						width: 250rpx;
						height: 180rpx;
						opacity: 1;
						border-radius: 12rpx;
					}
				}

			}
		}

	}
</style>